<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>浮动-浮动元素对父元素得影响</title>
	<style>
		.parent{
			border: 10px solid red;
			margin: 10px 0;
			/*3.使用overflow  开启BFC */
			/* overflow: hidden; */
		}
		/* 1.使用伪元素清除浮动 */
		/* .parent::after{
			clear: both;
			content: "";
			display: block;
		} */
		.child{
			width: 100px;
			height: 100px;
			background-color: blue;
			/* 开启浮动 */
			float: left;
		}
		/* 2.在浮动元素父元素后面添加一个空元素 清除浮动 */
		/* .clear2{
			clear: both;
		} */
		
		/* .clear{
			清除浮动
			clear: both;
		} */
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">1</div>
		<div class="child">2</div>
		<div class="child">3</div>
		<div class="child">4</div>
		<div style="clear: both;"></div>
	</div>
	<!-- 在浮动元素后面添加一个空标签 给空标签清除浮动 -->
	<div class="clear2"></div>
	<div class="parent clear"></div>
</body>
</html>